import React, { memo, useEffect, useState } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import { commentVideoAction } from "./store/actionTypes";
import NewComment from "@/components/aboutComment/newComment";

import Pagination from "@/components/pagination";
import { VideoWrap } from "./style";
import VideoComponent from "@/components/shipin/video";
import VideoBtn from "@/components/shipin/btn";
import Honored from "@/components/shipin/honored";
import VideoTitle from "@/components/shipin/title";

export default memo(function Video(props) {
  const mvid = props.location.search.split("=")[1];
  const [pageNum, setPageNum] = useState(1);
  const [a, setA] = useState(0);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(commentVideoAction(mvid, 20, (pageNum - 1) * 20));
  }, [dispatch, mvid, pageNum]);

  const { videoComment } = useSelector(
    (state) => ({
      videoComment: state.getIn(["video", "videoComment"]),
    }),
    shallowEqual
  );

  useEffect(() => {
    setA(1);
  }, [videoComment, mvid]);

  const changePage = (page, pageSize) => {
    setPageNum(page);
  };

  return (
    <VideoWrap>
      <div className="mv-left">
        <VideoTitle mvid={mvid} video={true} />
        <VideoComponent video={true} mvid={mvid} />
        <VideoBtn video={true} mvid={mvid} />
        <NewComment
          a={a}
          pageNum={pageNum}
          comments={videoComment}
          hotComment={videoComment.hotComments}
        />
        <Pagination
          page={pageNum}
          size={20}
          getPage={changePage}
          total={videoComment.total}
        />
      </div>
      <Honored video={true} mvid={mvid} />
    </VideoWrap>
  );
});
